<template>
	<view>
		<view class="content">
			<view class="order-name pl-16">
				云南西双版纳6日游
			</view>
			<view class="p032">
				<view>
					<select-list unit="月" title="出发月份">
					</select-list>
				</view>
				<view>
					<select-list unit="日">
					</select-list>
				</view>
			</view>
			<view>
				<uni-section type="circle" title="价格类型" />
				<view class="p032">
					<price-item></price-item>
					<price-item price-name="成人"></price-item>
				</view>
			</view>
			<view>
				<uni-list>
					<uni-list-item title="出行人信息" rightText="预订限制" :showArrow="false" @rightClick="orderLimit" />
					<view class="p032">
						<selectListm :listArr="travalerArr" @changeSel="change">
							<view class="adduser" @click="choiceTra">
								选择出行人>
							</view>
						</selectListm>
					</view>
					<view class="p032">
						<tourist-item v-for="item in selectTrave" :info="item" :key="item._id" @click="editTravel"></tourist-item>
					</view>
					
					<uni-list-item title="联系人信息" :showArrow="false" />
					<bjx-form label-type="inline" :rules="rules" label-width="70px" ref="form" :form="form" msg-type="in">
						<bjx-form-item prop="name" label="姓名">
							<input type="text" v-model="form.name" placeholder="请填写联系人" />
						</bjx-form-item>
						<bjx-form-item prop="phone" label="手机号码">
							<input type="number" v-model="form.phone" placeholder="请填写手机号码" />
						</bjx-form-item>
					</bjx-form>
				</uni-list>
			</view>
		</view>
		<view class="buy-footer uni-flex p032">
			<view class="price">总价：￥{{totalPrice}}</view>
			<view class="buy-btn" @click="submit">去支付</view>
		</view>
	</view>
</template>

<script>
	import numberBox from "@/components/uni-number-box/uni-number-box.vue"
	import uniSection from '@/components/uni-section/uni-section.vue'
	import selectList from "./components/select-list.vue"
	import priceItem from "./components/price-item.vue"
	import touristItem from './components/tourist-item.vue'
	import selectListm from './components/select-list-m.vue'
	import uniList from '@/components/uni-list/uni-list.vue'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
	import helpstore from '@/common/js/util-store.js'
	import bjxForm from '@/components/bjx-form/bjx-form.vue'
	import bjxFormItem from '@/components/bjx-form/bjx-form-item.vue'
	export default{
		components: {
			numberBox,
			selectList,
			priceItem,
			uniSection,
			touristItem,
			uniList,
			uniListItem,
			selectListm,
			bjxForm,
			bjxFormItem
		},
		data() {
			return {
				totalPrice: 2180,
				travalerArr:[],
				form:{
					name:'',
					phone:''
				},
				rules:{
					name: {
						required: true
					},
					phone: {
						required: true
					}
				}
			}
		},
		computed: {
			selectTrave() {
				return this.travalerArr.filter(v=>v.selected)
			}
		},
		onLoad() {
			uni.$on('newTraveInfo',this.handleTrave)
		},
		onUnload() {
			uni.$off('newTraveInfo');
		},
		methods: {
			orderLimit(){
				console.log('预定限制')
			},
			choiceTra(){
				uni.navigateTo({
					url:'../traveler/traveler',
					success: () => {
						helpstore.selectTrave = this.selectTrave
					}
				})
			},
			handleTrave(info){
				this.travalerArr = info;
				// 两种方法：一、传参_id查询信息；
				// 二、直接所有信息都传参（此处使用方案二）
			},
			change(index){
				let item = this.travalerArr[index];
				this.$set(item,'selected',!item.selected)
			},
			updateTravel(info){
				this.travalerArr.forEach((v,i)=>{
					if(v._id === info._id){
						this.travalerArr.splice(i,1,Object.assign(v,info))
						return;
					}
				})
			},
			editTravel(info){
				const id = info._id;
				uni.navigateTo({
					url:'/pages/traveler/traveler_add?id='+ id,
					events:{
						editTravel:this.updateTravel
					},
					success: (res) => {
						let curRoute  = this.$mp.page.route;
						res.eventChannel.emit('fromPage', { from: curRoute })
					}
				})
			},
			submit(){
				// console.log(this.selectTrave)
				// this.$refs.form.validate(async val=>{
				// 	if(val){
				// 		console.log(this.form)
				// 	}
				// })
				
				this.$request('order','placeAnOrder',{
					goodsId:'ce805e785fffc1940449bb02616771d5',
					children:2,
					adult:1
				}).then(res=>{
					console.log('下单成功',res)
					if (res.orderNo) {
						uni.navigateTo({
							url: '/pages/order/order-result?orderNo=' + res.orderNo
						})
					} else {
						throw new Error('下单失败')
					}
				}).catch((err)=>{
					uni.showModal({
						content: err.message || '下单失败',
						showCancel: false
					})
				})
			}
		},
	}
</script>

<style>
	page{
		/* background-color: #e3e3e3; */
		/* padding: 32rpx; */
	}
	.order-name{
		background-color: #e3e3e3;
		font-weight: bold;
	}
	.p032{
		padding: 0 32rpx;
	}
	.pl-16{
		padding-left: 32rpx;
	}
	.adduser{
		border:1px solid #a2a2a2;
		display: inline-block;
		padding: 10rpx;
		width: 180rpx;
		border-radius: 10rpx;
		text-align: center;
		overflow: hidden;
	}
	.buy-footer{
		background-color: #fff;
		border-top: 1px solid #ccc;
		position: fixed;
		width: 100%;
		bottom: 0;
		align-items: center;
		justify-content: space-between;
		box-sizing:border-box;
		z-index: 13;
	}
	.price{
		color: #ff4401;
		font-size: 1.1rem;
	}
	.buy-btn{
		padding: 15rpx;
		line-height: 50rpx;
		background-color: #ff4401;
		width: 40%;
		text-align: center;
		border-radius: 40rpx;
		color: #fff;
		font-size: 1.1rem;
	}
	.content{
		padding-bottom: 80rpx;
	}
</style>
